<template>
  <div class="login">
    <div class="content">
        <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="用户名">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="密码">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button style="width:100%" type="primary" @click="handleSubmit('formInline')">登陆</Button>
        </FormItem>
    </Form>
    </div>
  </div>
</template>

<script>
import {login,getUserInfo} from '../api/index'
import Router from '../router/index'
import authList from '../router/authList'
import Cookies from 'js-cookie'
import {filterRoutes} from '../utilis/filterList'
export default {
    data () {
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码至少6位字符', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        login({
                            user_name:this.formInline.user,
                            user_pwd:this.formInline.password
                        }).then(result=>{
                            if(result.code===1){
                                //获取用户信息
                                getUserInfo().then(result=>{
                                    //存储本地
                                    sessionStorage.setItem('userInfo',JSON.stringify(result.data));
                                    //根据身份过滤路由并添加到vuex
                                    let newRouterList=filterRoutes(authList,result.data.identity_text)
                                    this.$store.commit('AuthList/changeAuthList',{
                                        list:newRouterList
                                    })
                                    //添加路由
                                    Router.addRoutes(newRouterList);
                                     //跳转
                                    Router.push('/main');
                                }) 
                                    //存储token
                                    Cookies.set('token', result.token);
                                    this.$Message.success('成功!');
                            }else{
                                this.$Message.error('用户名或密码不正确!');
                            }
                        })
                    } else {
                        this.$Message.error('用户名或密码不正确!');
                    }
                })
            }
        }
}
</script>
<style lang="scss">
.login{
  height: 100%;
  min-width: 900px;
  position: relative;
  background: url('https://pic.3gbizhi.com/2020/1111/20201111023251736.jpg') no-repeat;
  .content{
    width: 400px;
    padding: 40px 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    position: absolute;
    right: 15%;
    top: 25%;
    box-sizing: border-box;
  }
}
</style>